﻿<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title>按钮</title>
    <script src="../js/jquery-3.4.1.min.js"></script>
    <script>
        //$(":checkbox[value=101]").click(xxxx);
        $().ready(function () {
            // 1:实现 全选 全不选 功能（通过点击 全选 按钮）
            let buttonFlag=true;
            $("body p :button").click(function () {
            if(buttonFlag){
                $("#menu :checkbox").prop("checked",true);
                buttonFlag=false;
            }else {
                $("#menu :checkbox").prop("checked",false);
                buttonFlag=true;
            }
            });
           // 2：选中h2中的大项，对应后面的小项 全部选中；取消选中，则小项全部取消；
            //let h2Flag=true;
            $("h2 input").click(function () {
                var h2Flag = $(this).prop("checked");
                $(this).parent().next().children().prop("checked", h2Flag);
                // if(h2Flag){
                //     $(this).parent().next().children().prop("checked", true);
                //     h2Flag=false;
                // }else {
                //     $(this).parent().next().children().prop("checked",false);
                //     h2Flag=true;
                // }
            });

            // 3:选中小项，则其对应的大项选中，如果小项都未选中，则大项不选。
            $("p input").click(function () {
                var inputFlag = true;
                var array = $(this).parent().children();

                for(var i in array) {
                    if(array[i].checked) {
                        $(this).parent().prev().children().prop("checked", true);
                        inputFlag = false;
                    }
                }
                if(inputFlag) {
                    $(this).parent().prev().children().prop("checked", false);
                    inputFlag = true;
                }
                // let inputFlag=false;
                // inputFlag=$(this).checked();
                // if(inputFlag){
                //     $(this).parent().prev().children().prop("checked",true);
                // }
            });


        });

    </script>
    <title>无标题文档</title>
</head>

<body>
<div id="menu">
    <h2><input type="checkbox" name="role" value="101"/>系统管理</h2>
    <p>
        <input type="checkbox" name="role" value="101001"/>用户管理
        <input type="checkbox" name="role" value="101002"/>参数管理
        <input type="checkbox" name="role" value="101003"/>权限管理
        <input type="checkbox" name="role" value="101004"/>日常管理
        <input type="checkbox" name="role" value="101005"/>财务管理
    </p>
    <hr/>
    <h2><input type="checkbox" name="role" value="102"/>鲜花订单管理</h2>
    <p>
        <input type="checkbox" name="role" value="102032"/>增加订单
        <input type="checkbox" name="role" value="102013"/>订单发货
        <input type="checkbox" name="role" value="102015"/>在线结算
        <input type="checkbox" name="role" value="102016"/>原料管理
    </p>
    <hr/>
    <h2><input type="checkbox" name="role" value="103"/>客户管理</h2>
    <p>
        <input type="checkbox" name="role" value="103032"/>增加用户
        <input type="checkbox" name="role" value="103032"/>查找用户
        <input type="checkbox" name="role" value="103012"/>用户维护
        <input type="checkbox" name="role" value="103012"/>生日祝贺
        <input type="checkbox" name="role" value="103012"/>删除用户
    </p>

    <hr/>
    <h2><input type="checkbox" name="role" value="104"/>任务管理</h2>
    <p>
        <input type="checkbox" name="role" value="104032"/>增加任务
        <input type="checkbox" name="role" value="104032"/>指定用户
        <input type="checkbox" name="role" value="104012"/>取消维护
        <input type="checkbox" name="role" value="104012"/>任务结算
        <input type="checkbox" name="role" value="104012"/>删除任务
    </p>
</div>
<p>
    <input type="button" value="全选" id="checkAll"/>
    <input type="submit" value="提交"/>
    <input type="reset" value="重置"/>
</p>
<hr/>

<p>
    1:实现 全选 全不选 功能（通过点击 全选 按钮）<br/>
    2：选中h2中的大项，对应后面的小项 全部选中；取消选中，则小项全部取消；<br/>
    3:选中小项，则其对应的大项选中，如果小项都未选中，则大项不选。<br/>
    4：不能采用固定value 的方式，比如$(":checkbox[value=1001]")这样的格式
</p>
</body>
</html>
